<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-CN">

<head>
<base href="<%=basePath%>">

<title>Collective Behavior Model</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!-- Bootstrap core CSS -->
<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet">
<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>

<style type="text/css">
#sigma-container {
	max-width: 700px;
	height: 500px;
	margin: auto;
}

.container {
	margin-top: 20px;
}
</style>

</head>

<body>
	<div class="container-fluid" style="height:100%">
		<div class="panel panel-primary">
			<div class="panel-body">
				<div class="row">
					<div class="col-lg-2 col-md-2 col-sm-2">
						<input type="text" class="form-control input-sm" id="nodes"
							placeholder="节点数" />
					</div>
					<div class="col-lg-2 col-md-2 col-sm-2">
						<input type="text" class="form-control input-sm" id="degree"
							placeholder="平均度数" />
					</div>
					<div class="col-lg-2 col-md-2 col-sm-2">
						<button class="btn btn-primary" id="creat_net">生成网络</button>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-2">
						<input type="text" class="form-control input-sm" id="threshold"
							placeholder="阈值" />
					</div>
					<div class="col-lg-2 col-md-2 col-sm-2">
						<button class="btn btn-primary" id="cascadeInfo">开始传播</button>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-2">
						<button class="btn btn-primary" id="restore">还原网络</button>
					</div>
				</div>
			</div>
		</div>
		<div class="panel panel-primary">
			<div class="panel-body">
				<div id="sigma-container"></div>
			</div>
		</div>
	</div>
	<!-- sigma-->
	<script src="<%=path%>/js/sigma.min.js"></script>
	<script src="<%=path%>/js/jquery-scrolltofixed-min.js"></script>
	<script src="<%=path%>/js/highlight.pack.js"></script>
	<script src="<%=path%>/js/sigma.plugins.animate.min.js"></script>
	<script src="<%=path%>/js/sigma.parsers.json.min.js"></script>
	<script src="<%=path%>/js/sigma.plugins.neighborhoods.min.js"></script>
	<script src="<%=path%>/js/sigma.plugins.dragNodes.min.js"></script>
	<script src="<%=path%>/js/sigma.layout.forceAtlas2.min.js"></script>
	<script>
	 sigma.classes.graph.addMethod('neighbors', function(nodeId) {
        var k,
                neighbors = {},
                index = this.allNeighborsIndex[nodeId] || {};

        for (k in index)
            neighbors[k] = this.nodesIndex[k];

        return neighbors;
    });
var flag=0;
var cascadeinfojson;
var mysigma;
 sigma.parsers.json(
            '<%=path%>/liutao/data/data.json',
							{
								container : 'sigma-container'
							},
							function(s) {
								mysigma = s;
								mysigma.settings({
									edgeColor : 'default',
									defaultEdgeColor : '#ccc',
								});

								/* mysigma.graph.nodes().forEach(function(n) {
									n.originalColor = "#34495E";
									n.color = "#34495E";
								}); */
								mysigma.graph.nodes().forEach(
									function(n) {
										 n.color = [ '#f8aba6', '#fab27b', 
												'#45b97c', '#65c294', '#585eaa', '#9b95c9' ][Math
												.round(Math.random() * 6)];
										 n.originalColor =  n.color;
										 n.size = 2;
									});
	
								mysigma.graph.edges().forEach(function(e) {
									e.type = 'arrow';
								});

	
								mysigma.graph.nodes()["0"].color = '#f00';
								mysigma.graph.nodes()["0"].originalColor = '#f00';
								mysigma.graph.nodes()["0"].size = 3;

								mysigma.refresh();
								
							});
			function submitPara() {
				$.ajax({
					type : "post",//请求方式
					url : "servlet/lliutaoservlet",//发送请求地址
					dataType : "json",
					data : {
						flag : "lt",
						nodes : $("#nodes").val(),
						degree : $("#degree").val(),
						//threshold : $("#threshold").val(),
					},
					success : function(data) {
						console.log("return succes");
						// document.execCommand('Refresh') ;
						location.reload('ture');
					}
				});
			}
			function showCascadeInfo() {
				$
						.ajax({
							type : "post",//请求方式
							url : "servlet/lliutaoservlet",//发送请求地址
							dataType : "json",
							data : {
								flag : "tao",
								threshold : $("#threshold").val(),
							},
							//请求成功后的回调函数有两个参数
							success : function(data) {
								console.log("diffuse");
								cascadeinfojson = eval(data); //解析json对象 
								//var count=0; 
								cascadeinfojson
										.forEach(function(cascadeNodeList) {
											//console.log("第"+(++count)+"次迭代");
											//count++;
											cascadeNodeList
													.forEach(function(nodeID) {
														//console.log(nodeID+"  ");
														mysigma.graph.nodes()[nodeID].color = '#E74C3C';
													});
											mysigma.refresh();
											// delay 1s

										});

							}
						});
			}
			$("#cascadeInfo").bind("click", function() {
				flag = 1;
				//console.log("hehe");
				showCascadeInfo();

			});

			$("#creat_net").bind("click", function() {
				console.log("submit");
				submitPara();

			});

			$("#restore").bind("click", function() {
				flag = 0;
				console.log("restore");
				mysigma.graph.nodes().forEach(function(n) {
					n.color = n.originalColor;
				});
				mysigma.graph.edges().forEach(function(e) {
					e.color = e.originalColor;
				});

				// Same as in the previous event:
				mysigma.refresh();

			});
		</script>
</body>
</html>




